<template>
    <div class="header">
        <router-link to="/home">
            <div class="header-left">
                <div class="iconfont back-icon">&#xe648;</div>
            </div>
        </router-link>
        <div class="header-input" @click="search">
            <span class="iconfont">&#xe60e;</span>
            <input type="text" placeholder="请输入需要搜索的推荐" style="padding-left: 22px;">
        </div>
            <div class="header-right" @click="tiaozhuan(city)">
              <span class="iconfont arrow-icon">&#xe61c;</span>
               {{ address}}
            </div>
    </div>
</template>

<script>
    // import { mapState } from 'vuex'
    export default {
        name: 'HomeHeader',
        // props : {
        //     city: String
        computed: {
            address () {
                return this.$store.getters.address;
            },
            city() {
                return (
                    this.$store.getters.location.addressComponent.city ||
                    this.$store.getters.location.addressComponent.province
                );
            }
        },
        methods: {
            tiaozhuan (city) {
                this.$router.push({
                    path: '/address',
                    // name: 'mallList',
                    query: {
                        city: city
                    }
                })
            },
            search () {
                this.$router.push('/search')
                this.$store.state.search=false
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header
        display flex
        line-height 40px
        background $bgColor
        color #fff
        .header-left
            width 10px
            float left
            .back-icon
              position relative
              left 0px
              padding-top 0px
              text-align center
              font-size 18px
              color #fff
              margin-left 3px
        .header-input
            flex 1
            height 30px
            padding-left 7px
            margin-left 16px
            margin-right -4px
            margin-top 5px
            background #fff
            border-radius 10px
            color #ccc
            line-height 25px
            font-size 15px
        .header-right
            width 98px
            padding 0 10px
            float right
            text-align center
            color #fff
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
            .arrow-icon
                font-size: 17px;
                position relative
                left 0px
                padding-top 0px
                margin-left 0
</style>
